---
title: 'Hosted'
description: 'Use consent.io for an easy, managed consent storage solution with minimal setup'
lastModified: 2025-08-22
availableIn:
  - framework: 'next'
    url: '/docs/frameworks/next/storing-consent/hosted'
    title: 'Next.js'
  - framework: 'react'
    url: '/docs/frameworks/react/storing-consent/hosted'
    title: 'React'
  - framework: 'javascript'
    url: '/docs/frameworks/javascript/storing-consent/hosted'
    title: 'JavaScript'
---

<import>../../javascript/shared/storing-consent/hosted.mdx#overview</import>

## Implementation

```tsx title="app/layout.tsx"
import { 
  ConsentManagerDialog,
  ConsentManagerProvider,
  CookieBanner,
} from '@c15t/nextjs';

export default function Layout ({ children }: { children: ReactNode }) => {
  return (
      <ConsentManagerProvider
        options={{
          mode: 'c15t',
          backendURL: '/api/c15t',
          consentCategories: ['necessary', 'marketing'], // Optional: Specify which consent categories to show in the banner.
          ignoreGeoLocation: true, // Useful for development to always view the banner.
        }}
      >
        <CookieBanner />
        <ConsentManagerDialog />   
        {children}
      </ConsentManagerProvider>
  );
};
```

<import>../../javascript/shared/storing-consent/hosted.mdx#using-consent-io</import>
